function cropContentArea(sourceImage) {
  console.log('Starting cropContentArea');
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  canvas.width = sourceImage.width;
  canvas.height = sourceImage.height;

  ctx.drawImage(sourceImage, 0, 0);

  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  console.log('Image dimensions:', canvas.width, 'x', canvas.height);

  // 找到内容区域的边界
  const bounds = findContentBounds(data, canvas.width, canvas.height);
  console.log('Content bounds:', bounds);

  // 创建新的 canvas 用于裁剪后的图像
  const croppedCanvas = document.createElement('canvas');
  const croppedCtx = croppedCanvas.getContext('2d');

  croppedCanvas.width = bounds.right - bounds.left;
  croppedCanvas.height = bounds.bottom - bounds.top;

  // 在新 canvas 上绘制裁剪后的图像
  croppedCtx.drawImage(
      canvas,
      bounds.left, bounds.top, croppedCanvas.width, croppedCanvas.height,
      0, 0, croppedCanvas.width, croppedCanvas.height
  );

  console.log('Cropping completed');
  return croppedCanvas;
}

function findContentBounds(data, width, height) {
  const brightnessThreshold = 30; // 亮度阈值，可以根据需要调整
  const subtitleHeight = 40; // 预估的字幕高度

  let left = 0, top = 0, right = width - 1, bottom = height - 1;

  // 从上到下查找顶部边界
  for (let y = 0; y < height / 2; y++) {
      if (hasContentRow(data, width, y, brightnessThreshold)) {
          top = y;
          break;
      }
  }

  // 从下到上查找底部边界，考虑字幕
  for (let y = height - 1; y > height / 2; y--) {
      if (hasContentRow(data, width, y, brightnessThreshold)) {
          bottom = Math.max(y - subtitleHeight, height / 2);
          break;
      }
  }

  // 从左到右查找左边界
  for (let x = 0; x < width / 2; x++) {
      if (hasContentColumn(data, width, height, x, brightnessThreshold)) {
          left = x;
          break;
      }
  }

  // 从右到左查找右边界
  for (let x = width - 1; x > width / 2; x--) {
      if (hasContentColumn(data, width, height, x, brightnessThreshold)) {
          right = x;
          break;
      }
  }

  // 添加一些边距
  const padding = 5;
  return {
      left: Math.max(0, left - padding),
      top: Math.max(0, top - padding),
      right: Math.min(width, right + padding),
      bottom: Math.min(height, bottom + padding)
  };
}

function hasContentRow(data, width, y, threshold) {
  for (let x = 0; x < width; x++) {
      const index = (y * width + x) * 4;
      const brightness = (data[index] + data[index + 1] + data[index + 2]) / 3;
      if (brightness > threshold) {
          return true;
      }
  }
  return false;
}

function hasContentColumn(data, width, height, x, threshold) {
  for (let y = 0; y < height; y++) {
      const index = (y * width + x) * 4;
      const brightness = (data[index] + data[index + 1] + data[index + 2]) / 3;
      if (brightness > threshold) {
          return true;
      }
  }
  return false;
}

function processImage(imageUrl) {
  const sourceImage = new Image();
  sourceImage.crossOrigin = "Anonymous";
  sourceImage.onload = function() {
      console.log('Image loaded:', sourceImage.width, 'x', sourceImage.height);
      const croppedCanvas = cropContentArea(sourceImage);
      document.body.appendChild(croppedCanvas);
  };
  sourceImage.onerror = function() {
      console.error('Error loading image');
  };
  sourceImage.src = imageUrl;
}

// 调用示例
for(let i = 1; i <= 4; i++){
  processImage( `./test/${i}.jpg`);
}

processImage( `./mv.jpg`);
processImage( `./mv2.jpg`);